<template>
	<view class="newtask-container">
		<view class="form-box">
			<view class="form-item">
				<view class="lable">任务名称：</view>
				<input v-model="params.title"  placeholder="请输入" placeholder-class="placeholder"/>
			</view>
			<view class="form-item">
				<view class="lable">任务执行时间：</view>
				<picker mode="time" class="time-picker" :value="params.hour"  @change="bindTimeChange">
					<view class="time" v-if="params.hour">{{params.hour}}</view>
					<view class="placeholder" v-else>请选择</view>
				</picker>
			</view>
			<view class="form-item">
				<view class="lable">关联设备：</view>
				<uni-data-select  v-model="params.device_id" :localdata="deviceList" :clear="false"
				  @change="deviceChange" class="data-select">
				</uni-data-select>
			</view>
			<view class="form-item">
				<view class="lable">关联开关：</view>
				<selectCheckbox class="multiple-box" v-model="chooseLine" collapse-tags :collapse-tags-num="10" multiple dataKey="label"
					dataValue="value" :localdata="lineList" :clear="false" @change="lineChange">
				</selectCheckbox>
			</view>
			<view class="form-item">
				<view class="lable">执行动作：</view>
				<uni-data-select  v-model="params.open_status" :localdata="range" :clear="false"
				  @change="actionChange" class="data-select">
				</uni-data-select>
			</view>
		</view>
		<view class="bottom-btn">
			<view class="btn" @tap="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import selectCheckbox from '@/components/selectCheckbox/selectCheckbox.vue'
	export default{
		components:{selectCheckbox},
		data(){
			return{
				type:null,
				taskId:'',
				
				details:{},
				params:{
					title:'',
					hour:'',
					device_id:'',
					line_id:'',
					open_status:'',
				},
				chooseLine:[],
				deviceList:[],
				lineList:[],
				range:[
					{ value: 1, text: "打开" },
					{ value: 2, text: "关闭" },
				],
			}
		},
		onLoad(option) {
			this.type=option.type
			this.taskId=option.id
			let barTitle=''
			if(this.type=='add'){
				barTitle='新建定时任务'
			}else if(this.type='edit'){
				barTitle='编辑定时任务'
			}
			uni.setNavigationBarTitle({
			    title: barTitle
			});
			
			this.getDeviceList()
			if(this.taskId){
				this.getTaskdetails()
			}
		},
		watch:{
			'params.device_id':{
				handler(value){
					if(value){
						this.getLineList()
					}
				},
				deep:true,
			},
		},
		methods:{
			bindTimeChange(e){
				this.params.hour = e.detail.value
			},
			
			// 获取店铺设备
			getDeviceList(){
				this.$request.post(this.$api.smartDeviceList, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.deviceList=[]
						data.forEach(item=>{
							this.deviceList.push({
								value:item.device_id,
								text: item.device_name,
							})
						})
					}
				})
			},
			
			// 获取店铺电路
			getLineList(){
				this.$request.post(this.$api.smartLineList, {
					store_id:uni.getStorageSync('store_id'),
					device_id:this.params.device_id,
					is_equipment :1,
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						let arr=[]
						
						data.forEach(item=>{
							arr.push({value:item.id,label:item.line_name})
						})
						this.lineList=arr
					}
				})
			},
			
			// 任务详情
			getTaskdetails(){
				this.$request.post(this.$api.taskDetails, {
					tasks_id:this.taskId
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.details=data
						this.params.title=data.title
						this.params.hour=data.hour
						this.params.device_id=data.device_id
						this.params.line_id=data.line_id
						this.params.open_status=data.open_status
						this.params.tasks_id=data.id
						this.chooseLine=this.convertStringToArray(data.line_id)
					}
				})
			},
			
			convertStringToArray(commaSeparatedString) {
				if(commaSeparatedString){
					// 使用split函数以逗号为分隔符将字符串拆分为数组
					let numberArray = commaSeparatedString.split(',');
					// 使用map函数将字符串数组中的每个元素转换为数字
					numberArray = numberArray.map(Number);
					return numberArray;
				}else{
					return []
				}
			},
			
			deviceChange(e){
				// console.log(e,"eeeeeeeeeeeeeeeeeee")
				if(e!=this.details.device_id){
					this.chooseLine=[]
				}else{
					this.chooseLine=this.convertStringToArray(this.details.line_id)
				}
			},
			lineChange(e){
				// console.log(e,"快快快快快快快快快卡卡卡")
			},
			actionChange(){
				
			},
			
			submit(){
				// console.log(this.chooseLine)
				this.params.line_id=this.chooseLine.join(',')
				this.params.store_id=uni.getStorageSync('store_id')
	
				this.$request.post(this.$api.addSmartTask, this.params, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.$tools.showToast('提交成功')
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.newtask-container{
		padding: 40rpx;
	}
	.form-box{
		.form-item{
			color: #fff;
			display: flex;
			margin-bottom: 30rpx;
			.lable{
				width: 200rpx;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				flex-shrink: 0;
				
				&::before{
					content:"*";
					display: inline-block;
					color: red;
				}
			}
			input{
				flex:1;
				border: 2rpx solid rgba(255, 255, 255, 0.6);
				padding: 10rpx 10rpx;
				font-size: 24rpx;
			}
			/deep/.placeholder{
				color: rgba(255, 255, 255, 0.6);
				font-size: 24rpx;
			}
			
			.time-picker{
				flex:1;
				border: 2rpx solid rgba(255, 255, 255, 0.6);
				padding:16rpx 10rpx;
				font-size: 24rpx;
			}
			
			/deep/.data-select{
				font-size: 24rpx;
				width:100%;
				.uni-select{
					height: 70rpx;
					border: 2rpx solid rgba(255, 255, 255, 0.6);
					.uni-select__input-box{
						height: 100%;
						overflow: hidden;
						.uni-select__input-text{
							font-size: 24rpx;
							color: #fff;
						}
						.uniui-clear{
							font-size: 40rpx !important;
						}
						
					}
					.uni-select__selector{
						.uni-select__selector-empty, .uni-select__selector-item{
							color: #333;
							font-size: 26rpx;
							padding: 10rpx 20rpx;
						}
					}
					
				}
			}
			
			.multiple-box{
				flex: 1;
			}
		}
	}
	
	.bottom-btn{
		width: 100%;
		position: absolute;
		bottom: 88rpx;
		left: 0;
		.btn{
			width: 670rpx;
			height: 90rpx;
			margin: 0 auto;
			background: rgb(31, 124, 247);
			border-radius: 72rpx;
			font-size: 34rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>